<template>
  <el-container>
    <el-container>
      <el-header style="text-align:center; font-size: 25px">小组留言室</el-header>
      <el-main>
        <!-- 留言列表 -->
        <div :class="item.stuId!=kk.form.stuId?'liuyan':'liuyan2'" v-for="(item,index) in state.tableData " :key='index'>
          <!-- 每一个留言列表3行 第一行:ueser 用户信息-->
          <div v-if="item.stuId!=kk.form.stuId">
          <div class="users">
            {{item.stuName}}: {{item.wordTime}}
          </div> <!-- 第二个留言内容 -->
          </div>
          <div v-if="item.stuId==kk.form.stuId">
            <div class="users" style="color: blue">
              {{item.wordTime}}
            </div> <!-- 第二个留言内容 -->
          </div>
          <div class="content">
            {{item.wordContent}}
          </div>
          <div class="list-bottom">
            <div class="left">

            </div>
            <!-- :underline='false' 去除下划线 -->
            <el-link :style="{display: item.stuId!=kk.form.stuId?'none':''}" type="danger" :underline='false' @click="handleDelete(item.wordId)">
              撤回
            </el-link>
          </div>
        </div>


      </el-main>
      <el-footer style="text-align: right;background-color: white">
        <el-button type="warning" style="padding-right:10px" @click="add">进行留言</el-button>

        <!-- 留言 -->
        <el-dialog v-model="dialogVisible" title="留言信息" width="40%" height="200px">
          <el-form label-width="80px" :model="state.form" :rules="state.rules" ref="rulesFormRef">

            <el-form-item label="留言内容" prop="wordContent">
              <!-- desc代表留言框内的内容 -->
              <el-input type="textarea" v-model="state.form.wordContent" placeholder="请输入留言内容"/>
            </el-form-item>

          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="save">确定</el-button>
            </span>
          </template>


        </el-dialog>
      </el-footer>
    </el-container>
  </el-container>
</template>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
.el-main{
  height: 80vh;
  overflow-y: scroll;
}

.tab {
  background-color: beige;
  margin-top: 20px;
}
.el-form{
  margin: 50px 0px;
}
.content{
  margin: 20px 10px;
}
.list-bottom{
  display: flex;
  justify-content: space-between;
}
.liuyan{
  border-bottom: 1px solid #999;
  background-color:  white;
  margin: 20px 0px;
  padding: 10px 0px;
}

.liuyan2{
  border-bottom: 1px solid #999;
  background-color:  white;
  text-align: right;
  margin: 20px 0px;
  padding: 10px 0px;
}

.left{
  cursor: pointer;
}

</style>


<script setup>
import {getCurrentInstance, reactive, ref} from "vue";
import request from "@/request";
import {ElMessage, ElNotification} from "element-plus";
const { proxy }=getCurrentInstance()

const kk = reactive({
  form:{},
})
kk.form=localStorage.getItem("student") ? JSON.parse(localStorage.getItem("student")) : {}

const load = () => {
  request.post('/word/listPage',JSON.stringify(page)).then(res=>{
    if(res.code===200) {
      state.tableData = res.data
      state.total=res.total
    }
  })
}

const page=reactive({
  param:{
    stu_name:ref()
  }
})

//刷新页面
load()
const dialogVisible=ref(false)
const add=()=>{
  dialogVisible.value=true;
  state.form={
    stuId:kk.form.stuId,
    wordTime:new Date().toLocaleString()
  }
}

//增加
const save=()=>{
  proxy.$refs.rulesFormRef.validate((valid)=>{
    if(valid){
      if(state.form.wordId){
        request.post('/word/update',JSON.stringify(state.form)).then(res=>{
          if(res.code===200){
            ElNotification({
              type:"success",
              message:"修改成功"
            })
            dialogVisible.value=false;
            load();
          }
        })
      }else {
        console.log(JSON.stringify(state.form))
        request.post('/word/save',JSON.stringify(state.form)).then(res=>{
          if(res.code===200){
            ElNotification({
              type:"success",
              message:"留言成功"
            })
            dialogVisible.value=false;
            load();
          }
        })
      }
    }else{
      ElMessage({
        type:"error",
        message:'请填写完整！'
      })
    }
  })
}




//删除
const handleDelete=(wordId)=>{
  request.get('/word/del',{params:{word_id:wordId}}).then(res=>{
    if(res.code===200){
      ElNotification({
        type:"success",
        message:"撤回成功"
      })
      load()
    }
  })
}

//数据
const state = reactive({
  tableData: [],
  total:0,
  form:{},
  rules:{
    stuId: [
      { required: true, message: '学生Id', trigger: 'blur' },
    ],
    wordContent: [
      { required: true, message: '留言内容', trigger: 'blur' },
    ],
    wordTime: [
      { required: true, message: '留言时间', trigger: 'blur' },
    ],
    stuName: [
      { required: true, message: '留言学生姓名', trigger: 'blur' },
    ]
  }
})

</script>
